Tengo esta función que se supone que debe devolver el nombre de un elemento collection_name que existe dentro de la cuenta de un usuario. En este caso el usuario se llama hola . Esta API devuelve un objeto en este caso, así que lo estoy convirtiendo en una matriz usando object.values . ¿Qué estoy haciendo mal aquí? (Además, el "hola" que se devuelve es solo un marcador de posición, tengo la intención de devolver el nombre de la colección allí.
import Spinner from '../Spinner'; import { useState, useEffect } from 'react'; function Badges() { const [assets, setAssets] = useState<any[]>(); useEffect(() => { async function fetchData() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicassets/v1/accounts/hello' ); const { data } = await res.json(); setAssets(data); } fetchData(); }, []); if (!assets) { return ( <div> <Spinner /> </div> ); } const messageArray = Object.values(assets); return ( <ul> {messageArray.map((result) => { const { 0: { collection: { collection_name }, }, } = result; console.log(collection_name); return <>hi</>; })} </ul> ); } export default Badges;Dale una oportunidad a esto. ¿Creo que esto es lo que querías? Sin embargo, podría estar completamente apagado :) De todos modos, se realizaron algunos cambios notables
Casi lo tenía, aunque creo que gran parte de la confusión se debió a cómo los datos regresaban de la API. La estructura de los datos parecía un poco confusa... al menos para mí. Para evitar este problema en el futuro, siempre puede respaldar sus respuestas de API con una interfaz de TypeScript.
import Spinner from '../Spinner'; import { useState, useEffect } from 'react'; interface Assets { collections: CollectionParent[]; templates: Template[]; assets: string; } interface Template { collection_name: string; template_id: string; assets: string; } interface CollectionParent { assets: string; collection: Collection; } interface Collection { allow_notify: boolean; author: string; authorized_accounts: string[]; collection_name: string; contract: string; created_at_block: string; created_at_time: string; img: string; market_fee: number; name: string; } function Badges() { const [assets, setAssets] = useState<Assets>(); useEffect(() => { async function fetchData() { const res = await fetch( "https://proton.api.atomicassets.io/atomicassets/v1/accounts/hello" ); const { data } = await res.json(); setAssets(data); } fetchData(); }, []); if (!assets) { return ( <div> <Spinner /> </div> ); } return ( <ul> {assets?.collections?.length > 0 && assets.collections.map((collectionParent, index) => { return ( <li key={index}>{collectionParent.collection.collection_name}</li> ); })} </ul> ); } export default Badges;